<template>
  <!-- 测试 drag api -->
  <div class="table-container" ref="tableContainer">
    <table border="1" cellpadding="0" cellspacing="0">
      <thead class="table-head">
        <tr>
          <th colspan="12">上午</th>
          <th colspan="12">下午</th>
        </tr>
        <tr>
          <th
            v-for="item in 24"
            :key="item"
            style="width: 50px; box-sizing: border-box"
          >
            {{ item }}
          </th>
        </tr>
      </thead>
      <tbody class="table-body">
        <tr v-for="(item, index) in dataList" :key="index">
          <td colspan="24">
            <div class="row_item_content">
              <div
                class="drag_item_list"
                data-type="target"
                @dragover.prevent
                @dragenter="dragenter"
                @drop="
                  (e) => {
                    drop(e, index);
                  }
                "
                @dragleave="dragleave"
              >
                <div
                  :class="['drag_item', it.active ? 'drag_item_selected' : '']"
                  v-for="(it, ind) in item.rowItems"
                  :key="ind"
                  :style="{
                    left: it.x_start + 'px',
                    width: it.x_end + 'px',
                  }"
                  draggable="true"
                  data-type="copy"
                  :data-itemMsg="
                    JSON.stringify({
                      row: {
                        index,
                        rowDate: item,
                      },
                      rowItem: {
                        index: ind,
                        item: it,
                      },
                    })
                  "
                  @dragstart="dragstart"
                  @drag="drag"
                  @dragend="dragend"
                  @click="clickItem(index, ind)"
                >
                  <div class="drag_item_text">
                    {{ it }}
                  </div>
                  <!-- 左 辅助 -->
                  <div class="aux_left"></div>
                  <!-- 右 辅助 -->
                  <div class="aux_right"></div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

let dataList = ref([
  {
    name: "工站01",
    rowItems: [
      {
        startTime: "2023-11-09 08:00:00",
        endTime: "2023-11-09 09:00:00",
        x_start: 50,
        x_end: 150,
        name: "张三",
      },
    ],
  },
  {
    name: "工站02",
    rowItems: [
      {
        startTime: "2023-11-09 08:00:00",
        endTime: "2023-11-09 09:00:00",
        x_start: 68,
        x_end: 189,
        name: "张三",
      },
    ],
  },
  {
    name: "工站03",
    rowItems: [
      {
        startTime: "2023-11-09 08:00:00",
        endTime: "2023-11-09 09:00:00",
        x_start: 69,
        x_end: 200,
        name: "张三",
      },
    ],
  },
  {
    name: "工站04",
    rowItems: [
      {
        startTime: "2023-11-09 08:00:00",
        endTime: "2023-11-09 09:00:00",
        x_start: 0,
        x_end: 50,
        name: "张三",
      },
    ],
  },
]);

let dragDom = {};
const dragstart = (e) => {
  const data = [
    { name: "Tom", age: 20 },
    { name: "Jerry", age: 18 },
  ];
  const strData = JSON.stringify(data);
  e.dataTransfer.setData("a", strData);
  console.log("dragstart", e, e.target.dataset);
  dragDom = e.target;
  // 设置拖拽样式
  e.dataTransfer.setDragImage(e.target, 0, 0);
};

const drag = (e) => {
  console.log("drag ---- 1", e, e.clientX);
  dragendX = e.x;
};

let dragendX = 0;
const dragend = (e) => {
  console.log("dragend ---- 2", e.target.offsetLeft, e, e.clientX);
  // dragendX = e.clientX;
  console.log("----------------", JSON.parse(e.target.dataset.itemmsg));
};

const drop = (e, index) => {
  console.log("drag ---- 3", e, index);
  console.log(e.dataTransfer.getData("a"), e.target, e.target.dataset);
  if (e.target.dataset.type === "target") {
    // 存在10px误差
    dragDom.style.left = dragendX - 10 + "px";
    e.target.appendChild(dragDom);
  }
  e.target.classList.remove("drag-enter");
};

const dragenter = (e) => {
  console.log("dragenter ---- 4", e, e.dataTransfer.getData("a"));
  if (e.target.dataset.type === "target") {
    e.target.classList.add("drag-enter");
  }
};

const dragleave = (e) => {
  console.log("dragleave", e);
  e.target.classList.remove("drag-enter");
};

// -------------复制/粘贴------------
let selectedItem = ref(null);
const clickItem = (index, ind) => {
  dataList.value.forEach((item) => {
    item.rowItems.forEach((item, ind) => {
      item.active = false;
    });
  });
  dataList.value[index].rowItems[ind].active = true;
  selectedItem.value = JSON.parse(
    JSON.stringify(dataList.value[index].rowItems[ind])
  );
  console.log(selectedItem.value, "点击");
};
let tableContainer = ref(null);
onMounted(() => {
  tableContainer.value.addEventListener("paste", (e) => {
    e.preventDefault();
    console.log("粘贴事件", e);
    const clipboardData = e.clipboardData || window.clipboardData;
    const pastedData = clipboardData.getData("text/plain");
    console.log(pastedData);
    // 鼠标箭头位置
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    console.log(selection, "箭头位置");
  });
  // 复制事件
  tableContainer.value.addEventListener("copy", (e) => {
    e.preventDefault();
    console.log("复制事件", e.target.dataset);
    if (selectedItem.value) {
      e.clipboardData.setData("text/plain", JSON.stringify(selectedItem.value));
    } else {
      alert("请选择复制项");
      e.clipboardData.setData("text/plain", "");
    }
  });
});
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  overflow: auto;
  table {
    border-color: #f2f2f2;
  }
  .table-head {
    height: 50px;
    background-color: #f2f2f2;
  }
  .table-body {
    max-height: 100px;
    overflow-y: scroll;
  }
  .row_item_content {
    width: calc(24 * 50px);
    height: 50px;
    padding: 5px 0;
    box-sizing: border-box;
    .drag_item_list {
      position: relative;
      height: 40px;
      background-color: #f2f2f2;
      border: 1px solid #d7d7d7;
      border-left: none;
      border-right: none;
      box-sizing: border-box;
      .drag_item {
        position: absolute;
        top: 0;
        height: 100%;
        background-color: #1890ff;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 3px;
        padding: 0 5px;
        .drag_item_text {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .aux_left {
          position: absolute;
          left: -4px;
          top: 50%;
          transform: translateY(-50%);
          width: 8px;
          height: 8px;
          background-color: #fff;
          border: 1px solid #000;
          box-sizing: border-box;
          cursor: w-resize;
        }
        .aux_right {
          position: absolute;
          right: -4px;
          top: 50%;
          transform: translateY(-50%);
          width: 8px;
          height: 8px;
          background-color: #fff;
          border: 1px solid #000;
          box-sizing: border-box;
          cursor: w-resize;
        }
      }
      .drag_item_selected {
        border: 1px solid #1890ff;
        box-shadow: 0 0 5px #1890ff;
        box-sizing: border-box;
      }
    }
    .drag-enter {
      border: 1px solid #1890ff;
      box-shadow: 0 0 5px #1890ff;
    }
  }
}
</style>
